<template>
    <div class="info">
       <div class="title">{{title}}</div>
       <div class="content">
        <div class="content-top">
            <div class="zuo">
                <div class="top-title">
                    <titleView text="资源共享" :font-size="20" :bg-image="require('../../../assets/image/组 21.png')">
                    </titleView>
                </div>
                <div class="zuo-content">
                    <div class="one" >
                        <div class="one-title">数据</div>
                        <div class="data" v-for="item in dataList" :key="item.name">
                            <div class="num">{{item.num}} <span style="font-size: 18px; font-weight: normal;">个</span></div>
                            <div class="numinfo">{{item.name}}</div>
                        </div>
                    </div>
                    <div class="two">
                        <div class="one-title">数据调用情况</div>
                        <div class="two-data">暂无数据</div>
                    </div>
                    <div class="three">
                        <div class="one-title">感知</div>
                        <div class="three-data" v-for="item in perceptionList" :key="item.name">
                            <div class="three-num">{{item.num}} <span style="font-size: 18px; font-weight: normal;">个</span></div>
                            <div class="three-numinfo">{{item.name}}</div>
                        </div>
                    </div>
                    <div class="four" >
                        <div class="one-title">组件</div>
                        <div class="big"></div>
                        <div class="four-data" v-for="item in assemblyList">
                            <div class="four-num" :class="item.num=='' ?'' : 'col' ">{{item.num}} <span style="font-size: 18px;font-weight: normal;">个</span></div>
                            <div class="four-numinfo">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="you">
                <div class="you-title">
                    <titleView text="应用技能" :font-size="20" :bg-image="require('../../../assets/image/组 21.png')">
                    </titleView>
                </div>
                <div class="you-one-title">应用运行</div>
                <div class="you-content">
                    <div class="you-data" v-for="(item,index) in moveList">
                        <div class="you-unm">{{item.num}}<span style="font-size: 18px; font-weight: normal;"> {{index%2==0?'个' :'次'}}</span></div>
                        <div class="you-name">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-bottom">
            <div class="bottom-title">
                <titleView text="资源使用" :font-size="20" :bg-image="require('../../../assets/image/组 21.png')">
                    </titleView>
            </div>
        </div>
       </div>
        <!-- 弹框组件 -->
        <Dialog :visible.sync="shows" :dialogWidth="1396">
            <template>
                <div style="width: 1302px; height: 21px; margin: 24px 0 7px 44px;position: relative; ">
                    <div>
                        <img src="@/assets/image/信息.png" alt="">
                        <span style="font-size: 16px;position: absolute;top:1px">共--个列表</span>
                    </div>
                </div>
                <div class="tableClass">
                    <el-table class="customer-table" :data="dataListss" style="width: 1302px;margin-left: 44px;"
                        stripe="true" :header-cell-style="{ color: '#2B4054', background: '#E5EFFF', fontSize: '16px' }"
                        :row-style="{ height: '40px' }" :cell-style="TableRowStyle">
                        <el-table-column prop="date" label="序号" width="80" type="index" style="height: 40px;">
                        </el-table-column>
                        <el-table-column prop="name" label="数据资源名称">
                        </el-table-column>
                        <el-table-column prop="unit" label="数据项数量（个）">
                        </el-table-column>
                        <el-table-column prop="people" label="共享类型">
                        </el-table-column>
                        <el-table-column prop="people" label="数据生产单位">
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </Dialog>
        <Dialog :visible.sync="showss">
            <template>
                <div style="width: 1302px; height: 21px; margin: 24px 0 7px 44px;position: relative; ">
                    <div>
                        <img src="@/assets/image/信息.png" alt="">
                        <span style="font-size: 16px;position: absolute;top:1px">共--个列表</span>
                    </div>
                </div>
                <div class="tableClass">
                    <el-table class="customer-table" :data="dataListsss" style="width: 1302px;margin-left: 44px;"
                        stripe="true" :header-cell-style="{ color: '#2B4054', background: '#E5EFFF', fontSize: '16px' }"
                        :row-style="{ height: '40px' }" :cell-style="TableRowStyle">
                        <el-table-column prop="date" label="实例ID" width="80" style="height: 40px;">
                        </el-table-column>
                        <el-table-column prop="name" label="实例名称">
                        </el-table-column>
                        <el-table-column prop="unit" label="主机IP">
                        </el-table-column>
                        <el-table-column prop="people" label="云服务商">
                        </el-table-column>
                        <el-table-column prop="people" label="vCPU(核)">
                        </el-table-column>
                        <el-table-column prop="people" label="内存(GB)">
                        </el-table-column>
                        <el-table-column prop="people" label="储存(GB)">
                        </el-table-column>
                        <el-table-column prop="people" label="应用名称">
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </Dialog>
    </div>
</template>

<script>
import Dialog from '@/components/dialog/index.vue'
import titleView from '@/components/title/index.vue'
export default {
    components: { Dialog,titleView },
    data() {
        return {
            shows: false,
            showss: false,
            title: '',
            // 数据
            dataList: [
                { name: '生产的数据资源', num: '1', nums: '1' },
                { name: '调用的应用', num: 0, nums: 0 },
                { name: '数据被调用', num: 0, nums: 0 },
            ],
            // 感知ist
            perceptionList: [
                { name: '感知设备数量', num: '1211' },
                { name: '被调用数量', num: '11111' }
            ],
            // 组件
            assemblyList: [
                { name: '共享组件数量', num: '1' },
                { name: '支撑应用数量', num: '' },
                { name: '组件被调用数量', num: '' }
            ],
            //运行
            moveList: [
                { name: '总注册用户数量', num: '2' },
                { name: '平均日活用户数量', num: '2' },
                { name: '总访问数量', num: '2' },
                { name: '平均日访问数量', num: '2' },
                { name: '系统最大并发数量', num: '2' },
            ],
            //资源使用感知
            perceptionLists: [
                { name: '感知设备数量', num: '' },
                { name: '被调用数量', num: '' }
            ],
            //资源使用组件
            assemblyLists: [
                { name: '使用组件数量', num: '1' },
                { name: '组件调用数量', num: '' },
            ],
            //表格内容
            dataListss: [
                { name: '自行车', unit: '公安', people: '小李' },
                { name: '自行车', unit: '公安', people: '小李' },
                { name: '自行车', unit: '公安', people: '小李' },
                { name: '自行车', unit: '公安', people: '小李' },
            ],
            dataListsss:[]
        }
    },
    mounted() {
        let name = this.$route.query.datas
        this.title = name
    },
    methods: {
        show(item) {
            this.shows = true
            if (this.tableShow === true) {
                this.tableShow = false
            } else {
                this.tableShow = true
            }
        },
        datainfo() {
            console.log(1);
            this.showss = true

        },
        TableRowStyle({ row, rowIndex }) {
            let tableRowStyle = "";

            if (rowIndex % 2 == 0) {
                console.log("奇数行");
                tableRowStyle = tableRowStyle + "background-color: rgba(229,239,255,0.3);";
                return tableRowStyle;
            }
            return tableRowStyle;
        },
    }
}
</script>

<style lang="scss" scoped>
.info{
    width: 100%;
    height: auto;
    background-color: #F2F8FF;
}
.title{
    width: 100%;
    height: 42px;
    font-weight: 700;
    margin: 20px 0 30px 0;
    font-family: MicrosoftYaHei-Bold;
	font-size: 42px;
    text-align: center;
}
.content{
    width: 1860px;
    height: 100%;
    margin-left: 30px;
    margin-top: 30px;
}
.content-top{
    display: flex;
    width: 100%;
    height:449px;

}
.content-bottom{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    height: 553px;
	background-color: #ffffff;
	border-radius: 16px;
    overflow: hidden;
}
.zuo{
    width: 1271px;
	height: 449px;
	background-color: #ffffff;
	border-radius: 16px;
    margin-right: 30px;
}
.you{
    width: 558px;
	height: 449px;
	background-color: #ffffff;
	border-radius: 16px;
}
.top-title{
    margin-left: 21px;
    margin-top: 27px;
}
.zuo-content{
    display: flex;
    width: 100%;
    height: 380px;
    margin-top: 25px;
}
.one{
    width: 234px;
    height: 100%;
    margin-left: 22px;
}
.one-title{
    width: 100%;
    height: 19px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: 700;
	font-size: 18px;
}
.data{
    width: 234px;
	height: 95px;
    text-align: center;
	background-image: linear-gradient(0deg, 
		#ffffff 0%, 
		#f0f6ff 100%), 
	linear-gradient(
		#3a72b3, 
		#3a72b3);
	background-blend-mode: normal, 
		normal;
	border-radius: 8px;
    margin-top: 15px;
    overflow: hidden;
}
.num{
    height: 24px;
    margin-top: 26px;
    font-weight: 700;
	font-family: MicrosoftYaHei-Bold;
	font-size: 30px;
}
.numinfo{
    height: 19px;
    margin-top: 14px;
	font-family: MicrosoftYaHei;
	font-size: 18px;
}
.two{
    width: 427px;
    height: 100%;
    margin-left: 30px;
}
.two-data{
    text-align: center;
    width: 427px;
	height: 304px;
    line-height: 304px;
	background-image: linear-gradient(0deg, 
		#ffffff 0%, 
		#ecfafc 100%), 
	linear-gradient(
		#3a72b3, 
		#3a72b3);
	background-blend-mode: normal, 
		normal;
	border-radius: 8px;
    margin-top: 15px;
}
.three{
    width: 234px;
    height: 100%;
    margin-left: 30px;
}
.three-data{
    width: 234px;
	height: 145px;
	background-image: linear-gradient(0deg, 
		#ffffff 0%, 
		#fef7e5 100%), 
	linear-gradient(
		#3a72b3, 
		#3a72b3);
	background-blend-mode: normal, 
		normal;
	border-radius: 8px;
    text-align: center;
    margin:17px 0 13px 0;
    overflow: hidden;
}
.three-num{
    height: 24px;
    font-weight: 700;
    margin-top: 47px;
	font-family: MicrosoftYaHei-Bold;
	font-size: 30px;
}
.three-numinfo{
    height: 19px;
    margin-top: 14px;
	font-family: MicrosoftYaHei;
	font-size: 18px;
}
.four{
    position: relative;
    width: 234px;
    height: 100%;
    margin-left: 30px;
}
.four-data{
    text-align: center;
    width: 234px;
	height: 95px;
	background-image: linear-gradient(0deg, 
		#ffffff 0%, 
		#f1efff 100%), 
	linear-gradient(
		#3a72b3, 
		#3a72b3);
	background-blend-mode: normal, 
		normal;
	border-radius: 8px;
    margin-top: 17px;
    overflow: hidden;
}
.big{
    position: absolute;
    top: 60px;
    width: 6px;
	height: 46px;
	background-color: #887be1;
	border-radius: 3px;
}
.four-num{
    height: 24px;
    margin-top: 16px;
    font-weight: 700;
	font-family: MicrosoftYaHei-Bold;
	font-size: 30px;
}
.four-numinfo{
    height: 19px;
	font-family: MicrosoftYaHei;
	font-size: 18px;
    margin-top: 14px;
}
.col{
    color: #887ce1;
}
.you-title{
    margin-left: 21px;
    margin-top: 27px;
}
.you-one-title{
    width: 100%;
    height: 19px;
    margin-top: 26px;
    margin-left: 30px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: 700;
	font-size: 18px;
}
.you-content{
    display: flex;
    flex-wrap: wrap;
    width: 530px;
    height: 314px;
    margin-top: 17px;
    margin-left: 30px;
}
.you-data{
    text-align: center;
    width: 234px;
	height: 95px;
	background-image: linear-gradient(0deg, 
		#ffffff 0%, 
		#f0f6ff 100%), 
	linear-gradient(
		#3a72b3, 
		#3a72b3);
	background-blend-mode: normal, 
		normal;
	border-radius: 8px;
    margin-right: 30px;
    overflow: hidden;
}
.you-unm{
    height: 24px;
	font-family: MicrosoftYaHei-Bold;
	font-size: 30px;
    font-weight: 700;
    color: #2b4054;
    margin-top: 18px;
}
.you-name{
    height: 19px;
	font-family: MicrosoftYaHei;
	font-size: 18px;
    color: #2b4054;
    margin-top: 14px;
}
.bottom-title{
    margin-left: 21px;
    margin-top: 27px;
}
</style>